/* side */

.side {
	position: fixed;
	width: 54px;
	height: 275px;
	right: 0;
	top: 55%;
	z-index: 100;
}

.side ul li {
	width: 54px;
	height: 54px;
	float: left;
	position: relative;
	list-style: none;
}

.side ul li .sidebox {
	position: absolute;
	width: 54px;
	height: 54px;
	top: 0;
	right: 40px;
	transition: all 0.3s;
	background: #000;
	opacity: 1;
	filter: Alpha(opacity=100);
	color: #fff;
	font: 14px/54px "΢���ź�";
	overflow: hidden;
}

.side ul li .sidetop {
	width: 54px;
	height: 54px;
	line-height: 54px;
	display: inline-block;
	background: #000;
	opacity: 1;
	filter: Alpha(opacity=100);
	transition: all 0.3s;
	right: 40px;
	position: absolute;
}

.side ul li .sidetop:hover {
	background: #1c2939;
	opacity: 1;
	filter: Alpha(opacity=100);
}

.side ul li img {
	float: left;
	/*width:100%;*/
}

.side ul li .sidebox-1 {
	position: absolute;
	width: 54px;
	height: 54px;
	top: 0;
	right: 40px;
	transition: all .3s;
	background: #000;
	color: #fff;
	font: 14px/54px "΢���ź�";
	overflow: hidden;
	line-height: 48px;
}

.sidebox a {
	color: #ffffff
}

.ctrl_qrcode {
	position: relative !important;
}

.wxtp-bg {
	width: 170px;
	display: none;
	position: absolute;
	right: 94px;
	top: -60px;
	height: 194px;
	z-index: 9999 !important;
	border-radius: 10px;
	background: linear-gradient(80deg, #323a4e, #282f3e);
	background: -webkit-linear-gradient(10deg, #323a4e, #282f3e);
	background: -webkit-linear-gradient(80deg, #323a4e, #282f3e);
}

.wxtp-bg-wx {
	width: 146px;
	height: 146px;
	margin: 10px;
}

.wxtp-bg-wz {
	text-align: center;
	line-height: 20px;
	color: #fff;
	font-size: 14px;
}

.wxtp-bg-wx img {
	margin: 0 !important;
	float: none !important;
	padding-left: 2px;
}

.ctrl_qrcode:hover .wxtp-bg {
	display: block;
	transition: all .3s
}

.wx-xftb {
	display: none;
	width: 10px;
	height: 11px;
	position: absolute;
	right: 60px;
	top: 10px;
}

.ctrl_qrcode:hover .wx-xftb {
	display: block;
	transition: all .3s
}

.ctrl_qrcode:hover .sidebox-1 {
	background: #1c2939 !important;
	transition: all .3s
}

@media only screen and (max-width: 414px) {
	.side {
		position: fixed;
		width: 38px;
		height: 275px;
		right: 0;
		top: 52%;
		z-index: 100;
	}
	.side ul li {
		width: 38px;
		height: 38px;
		float: left;
		position: relative;
		border-bottom: 1px solid #444;
		list-style: none;
	}
	.side ul li .sidebox {
		position: absolute;
		width: 38px;
		height: 38px;
		top: 0;
		right: 40px;
		transition: all 0.3s;
		background: #000;
		opacity: 1;
		filter: Alpha(opacity=100);
		color: #fff;
		font: 14px/54px "΢���ź�";
		overflow: hidden;
		line-height: 38px;
	}
	.sidebox img {
		width: 38px;
		height: 38px;
	}
	.sidebox a {
		color: #ffffff
	}
	.side ul li .sidebox-1 {
		position: absolute;
		width: 38px;
		height: 38px;
		top: 0;
		right: 40px;
		transition: all .3s;
		background: #000;
		color: #fff;
		font: 14px/54px "΢���ź�";
		overflow: hidden;
		line-height: 48px;
	}
	.sidebox-1 img {
		width: 38px;
		height: 38px;
	}
	.side ul li .sidetop {
		width: 38px;
		height: 38px;
		line-height: 38px;
		display: inline-block;
		background: #000;
		opacity: 1;
		filter: Alpha(opacity=100);
		transition: all 0.3s;
		right: 40px;
		position: absolute;
	}
	.side ul li .sidetop img {
		width: 38px;
		height: 38px;
	}
	.wxtp-bg {
		right: 78px;
		top: -60px;
	}
}